<template>
  <div class="ec_child" id="main3"></div>
</template>

<script>
export default {
  data() {
    return {
      res: {},
      woman: 0,
      man: 0
    }
  },
  methods: {
    initChart() {
      var myChart = this.$echarts.init(document.getElementById("main3"));
      myChart.setOption({
        title: {
          text: "报到学生性别比例",
          left: "center"
        },
        //提示框组件,鼠标移动上去显示的提示内容
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
        },
        //图例
        legend: {
          //图例垂直排列
          orient: 'vertical',
          x: 'right',
          //data中的名字要与series-data中的列名对应，方可点击操控
          data: ['男', '女']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            //饼状图
            // radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            //标签
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: '{d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比

                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                  fontFamily: '微软雅黑',
                  fontSize: 15,
                  fontWeight: 'bolder'
                }
              },
            },
            data: [
              { value: this.man, name: '男' },
              { value: this.woman, name: '女' }
            ]
          }
        ]
      });
    },
    initData() {
      // console.log(this.res);
      this.man = this.res[0][0];
      this.woman = this.res[1][1];
      // console.log(this.man);
      // console.log(this.woman);
    }
  },
  mounted() {
    this.$axios
      .get('../../public/testData/data.json')
      .then((res) => {
        this.res = res.data.data.sex;
        this.initData();
        this.initChart();
      })
  },
};
</script>
